<div class="d-flex justify-content-between">
  <div class="d-flex align-items-center flex-1">
    <!-- <nz-upload nzAction="/file" [nzShowUploadList]="false" [nzData]="uploadData" nzMultiple
      (nzChange)="uploadChange($event)">
      <button nz-button nzType="primary" [nzLoading]="http.loading">
        <i nz-icon nzType="upload"></i>
        <span>{{ http.loading ? '上传中' : '选择图像' }}</span>
      </button>
    </nz-upload>
    <ng-template [ngTemplateOutlet]="actions"></ng-template> -->
  </div>
  <!-- <nz-button-group>
    <button nz-button (click)="showType = 'big'" [disabled]="showType == 'big'">
      <i nz-icon nzType="appstore"></i>
    </button>
    <button nz-button (click)="showType = 'small'" [disabled]="showType == 'small'">
      <i nz-icon nzType="bars"></i>
    </button>
  </nz-button-group> -->
</div>
<nz-spin [nzSpinning]="loading">
  <div *ngIf="showType == 'small'" class="file-manager__header">
    <div class="file-manager__header-name">Filename</div>
    <div class="file-manager__header-pixel">Pixel</div>
    <div class="file-manager__header-time">Changed</div>
  </div>
  <div class="file-manager" [ngClass]="{ 'file-manager__small': showType == 'small' }">
    <div *ngFor="let i of list; let idx = index" class="file-item" (click)="cho(i)">
      <i *ngIf="i.type === 'folder'" class="file-item__icon" nz-icon nzType="folder"></i>
      <ng-container *ngIf="i.type === 'file'">
        <i *ngIf="!i.is_img" class="file-item__icon" nz-icon nzType="file-{{ i.ext }}"></i>
        <!-- <div class="file-item__img" *ngIf="i.is_img" [ngStyle]="{ 'background-image': 'url(' + i.url + ')' }"></div> -->
        <img [src]="i.pic" class="file-item__img"
          [ngStyle]="{'width': !i.noimg ? '140px' : '100px', 'height': !i.noimg ? '84px' : '100px'}">
      </ng-container>
      <div class="file-item__name">{{ i.productCd }}</div>
      <span nz-dropdown [nzDropdownMenu]="actionMenu" class="dd-btn file-item__actions">
        <i nz-icon nzType="ellipsis"></i>
      </span>
      <nz-dropdown-menu #actionMenu="nzDropdownMenu">
        <ul nz-menu>
          <li *ngIf="auth_btn_edit" nz-menu-item>
            <nz-upload nzAction="/cf/admin/sysfile/upload" [nzBeforeUpload]="beforeUpload" nzAccept=".jpg,.png"
              nzLimit="1" [nzShowUploadList]="false" (nzChange)="handleChange(i, $event)">上传
            </nz-upload>
          </li>
          <li *ngIf="!i.noimg" nz-menu-item (click)="copyData(i.url, 'link')">复制链接</li>
          <li *ngIf="!i.noimg" nz-menu-item (click)="copyData(i.url, 'code')">复制代码</li>
          <!-- <li *ngIf="!i.noimg" nz-menu-item (click)="rename(i)">重命名</li> -->
          <li *ngIf="!i.noimg && auth_btn_del" nz-menu-item nz-popconfirm nzPopconfirmTitle="确定吗？"
            (nzOnConfirm)="remove(i.productCd, idx)">
            删除图片
          </li>
        </ul>
      </nz-dropdown-menu>
    </div>
  </div>
  <div class="text-center mt-md">
    <nz-pagination [(nzPageIndex)]="s.current" (nzPageIndexChange)="load(s.current)" [nzPageSize]="s.size"
      [nzTotal]="total" nzHideOnSinglePage></nz-pagination>
  </div>
  <div class="no-data" *ngIf="total === 0">
    <nz-empty></nz-empty>
  </div>
</nz-spin>
<nz-modal [(nzVisible)]="renameModel" nzTitle="重命名" (nzOnOk)="renameOk()" (nzOnCancel)="renameModel = false">
  <input nz-input [(ngModel)]="renameTitle" name="renameTitle" />
</nz-modal>
